import {useLoad} from "@tarojs/taro";
import {useState} from "react";
import {Swiper, SwiperItem,Image} from "@tarojs/components";
import {getRequest} from "../util/request";

export default function Header() {

  const [bannerList, setBannerList] = useState<any>([]);

  const queryList = () => {
    getRequest('/bsBanner/list', res => {
      setBannerList(res.data)
    })
  }

  useLoad(() => {
    queryList()
  })

  return (
    <view className='relative w-full h-64 overflow-hidden bg-gray-900'>
      <Swiper
        className='test-h'
        style={{ height: '250px'}}
        indicatorColor='#999'
        indicatorActiveColor='#333'
        interval={3000}
        circular
        indicatorDots
        autoplay
      >
        {bannerList.map((image, index) => (
          <SwiperItem key={index} >
            <Image src={image.url} style={{ height: '100%', width: '100%' }} svg />
          </SwiperItem>
        ))}
      </Swiper>
    </view>
  );
}
